<template>
  <div class="goodsList">
    <p style="padding: 10px; border-bottom: 1px solid #f2f2f2; font-size: 18px">
      商品列表
    </p>

    <el-table :data="tableData">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>￥{{ props.row.price.toFixed(2) }}</span>
            </el-form-item>
            <el-form-item label="商品图片">
              <img :src="props.row.imgUrl" alt="" />
            </el-form-item>
            <el-form-item label="创建时间">
              <span>{{ props.row.ctime }}</span>
            </el-form-item>
            <el-form-item label="商品评价">
              <span>{{ props.row.rating }}</span>
            </el-form-item>
            <el-form-item label="创建销量">
              <span>{{ props.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"></el-table-column>
      <el-table-column label="所属分类" prop="category"></el-table-column>
      <el-table-column label="商品价格" >
        <template slot-scope="scope"> ￥{{ scope.row.price.toFixed(2) }} </template>
      </el-table-column>
      <el-table-column label="商品图片">
        <template slot-scope="scope">
          <img :src="scope.row.imgUrl" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"></el-table-column>

      <el-table-column label="操作" min-width="150px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            style="background: #ffcc00; color: #fff"
            @click="editBtn(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="delBtn(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        :page-sizes="pagesizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="curchange"
        @size-change="sizechange"
      >
      </el-pagination>
    </div>

    <!-- 修改模态框 -->
    <el-dialog title="修改商品" :visible.sync="dialogShow" width="40%">
      <el-form>
        <el-form-item label="商品名称">
          <el-input v-model="editGoods.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="商品 ID ">
          <el-input
            v-model="editGoods.id"
            style="width: 80%"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-select v-model="editGoods.category">
            <el-option
              v-for="item in categories"
              :key="item.categories"
              :label="item.cateName"
              :value="item.cateName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number
            v-model="editGoods.price"
            :min="1"
            :max="9999"
            label="商品价格"
          ></el-input-number>
        </el-form-item>

        <el-form-item label="商品图片">
          <el-upload
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            :show-file-list="false"
            :on-success="imgUploadSucess"
          >
            <img :src="editGoods.imgUrl" alt="" />
          </el-upload>
        </el-form-item>

        <el-form-item label="商品描述">
          <el-input
            type="textarea"
            v-model="editGoods.goodsDesc"
            style="width: 80%"
          ></el-input>
        </el-form-item>
      </el-form>

      <!-- <input type="text"> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeBtn" style="background: #ffcc00; color: #fff"
          >取 消</el-button
        >
        <el-button type="success" @click="sureBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { goodslist, goodsdel, categories, goodsedit } from "@/apis/goods";
import { getYYYYMMDDHHMMSS } from "@/utils/utils";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      currentPage: 1, //当前页码
      pageSize: 5, //每页条数
      imgUrl: "", //商品图片
      pagesizes: [5, 10, 15, 20], //每页条数
      dialogShow: false, //修改模态框
      editGoods: {}, //修改模态框数据
      categories: [], //商品分类选项
      category: [], //商品分类
    };
  },

  methods: {
    //渲染函数
    getGoodsList() {
      if (this.isclickpages) {
        this.$message({
          message: "系统提示：操作过于频繁,稍后再试噢 （⊙ｏ⊙）",
          type: "warning",
        });
        return;
      }
      this.isclickpages = true;

      setTimeout(() => {
        this.isclickpages = false;
      }, 500);

      goodslist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      }).then((res) => {
        // console.log(res.data.data);
        this.total = res.data.total;
        this.tableData = res.data.data;
        // console.log(this.editGoods);
        for (const obj of res.data.data) {
          obj.ctime = getYYYYMMDDHHMMSS(obj.ctime);
        }
      });
    },
    //分页
    curchange(page) {
      // console.log(page);
      this.currentPage = page;
      this.getGoodsList();
    },
    sizechange(num) {
      this.pageSize = num;
      this.getGoodsList();
    },
    //删除
    delBtn(id) {
      this.$confirm(
        "此操作会永久删除该数据哦~, 是否继续?(。>︿<)_θ",
        "系统提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "closeBtn",
          confirmButtonClass: "sureBtn",
          type: "warning",
        }
      )
        .then(() => {
          goodsdel({ id: id }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "系统提示：删除商品成功(❁´◡`❁)",
                type: "success",
              });
            }
          });
          this.getGoodsList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "系统提示：已取消删除(/▽＼)",
          });
        });
      // console.log(id);
    },
    //编辑
    editBtn(item) {
      this.dialogShow = true;
      // console.log(item);
      this.editGoods = JSON.parse(JSON.stringify(item));
    },
    //图片上传
    imgUploadSucess(res) {
      this.imgUrl = res.imgUrl;
      let oldImg = this.editGoods.imgUrl;
      let imgIp = oldImg.substr(0, oldImg.lastIndexOf("/") + 1);
      this.editGoods.imgUrl = imgIp + res.imgUrl;
    },
    //点击模态框取消
    closeBtn() {
      this.dialogShow = false;
    },
    //点击模态框确定
    sureBtn() {
      let { name, category, price, goodsDesc, id ,imgUrl} = this.editGoods;
      // console.log(this.editGoods.imgUrl);
      goodsedit({
        name,
        category,
        price,
        goodsDesc,
        id,
        imgUrl:imgUrl.substr(imgUrl.lastIndexOf('/')+1),
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.dialogShow = false;
          this.getGoodsList();
          this.$message({
            message: "系统提示：修改商品成功 (づ￣ 3￣)づ",
            type: "success",
          });
        }
      });
    },
  },
  created() {
    this.getGoodsList();
    //商品分类
    categories({}).then((res) => {
      this.categories = res.data.categories;
      // console.log(this.categories);
    });

     this.$bus.emit('subTitle','商品管理>','商品列表>')
  },
};
</script>

<style lang="less">
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
img {
  width: 100px;
}
.closeBtn {
  color: #fff;
  background: #ffcc00;
  border: 1px solid #ffcc00 !important;
}
.closeBtn:hover {
  color: #fff;
  background: #ffe063;
}
.sureBtn {
  color: #fff !important;
  background: #f56c6c !important;
  border: 1px solid #f56c6c !important;
}
.sureBtn:hover {
  // color: #fff  ;
  background: #ff8e8e !important;
}
</style>